<template>
  <div>
    <!-- 购物车空状态 -->
    <van-empty v-if="!list.length" description="购物车快饿瘪了T.T">
      <van-button class="bottom-button" round plain type="primary"
        >去逛逛</van-button
      >
    </van-empty>

    <!-- 列表渲染 -->
    <div>
      <van-swipe-cell v-for="item in list" :key="item.id">
        <van-card
          :price="item.price"
          :title="item.name"
          class="goods-card"
          :thumb="item.img"
        >
          <template #num>
            <van-stepper v-model="value" />
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      list: [],
      value: 1,
    };
  },
  computed: {
    ...mapState(["info"]),
  },
  created() {
    this.list = this.info;
    console.log(this.list);
  },
};
</script>


<style scoped>
.bottom-button {
  width: 100px;
  height: 40px;
}
</style>